<template>
  <div class="container">
    <div>
      <el-card class="box-card">
        <div class="text item">
          <span class="searchText">仓库名称 :</span>
          <el-input v-model="searchForm.name" placeholder="请输入仓库名称"></el-input>
          <el-button type="primary" size="default" class="searchBtn resetBtn" @click="resetSearch"
            >重置</el-button
          >

          <el-button type="primary" size="default" class="searchBtn" @click="search"
            >搜索</el-button
          >
          <el-button type="primary" size="default" class="addBtn" @click="addDialog = true"
            >新增仓库</el-button
          >
        </div>
      </el-card>
    </div>
    <div class="data-table">
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column align="center" prop="id" label="仓库ID"> </el-table-column>
        <el-table-column align="center" prop="name" label="仓库名称"> </el-table-column>
        <el-table-column align="center" prop="type" label="仓库类型"> </el-table-column>
        <el-table-column align="center" prop="address" label="仓库地址"> </el-table-column>
        <el-table-column align="center" prop="area" label="仓库面积(㎡)"> </el-table-column>
        <el-table-column align="center" label="仓库图片">
          <template slot-scope="scope">
            <image-preview
              :src="scope.row.imgUrl"
              :height="50"
              :width="50"
            ></image-preview>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="manager" label="仓库人员"></el-table-column>
        <el-table-column align="center" prop="status" label="仓库状态"></el-table-column>
        <el-table-column align="center" prop="description" label="仓库描述"></el-table-column>
        <el-table-column align="center" label="操作" fixed="right" :width="230">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="particulars(scope.row.id)">
              详情
            </el-button>
            <el-button type="warning" size="small" @click="amend(scope.row.id)">修改</el-button>
            <el-button type="danger" size="small" @click="remove(scope.row.id, scope.row.name)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 修改和详情弹框 -->
    <el-dialog
      v-if="form !== null"
      :title="flag ? '仓库详情' : '仓库修改'"
      :visible.sync="dialogFormVisible"
      :show-close="false"
      width="30%"
    >
      <el-form :data="form" :disabled="flag">
        <el-row :gutter="70">
          <el-col
            ><div class="grid-content bg-purple">
              <el-form-item label="仓库ID">
                <el-input disabled v-model="form.id"></el-input>
              </el-form-item>

              <el-form-item label="仓库名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>

              <el-form-item label="仓库类型">
                <span v-if="flag">{{ form.type }}</span>
                <el-select v-model="form.type" v-else placeholder="选择">
                  <el-option v-for="(item, i) in wTypeList" :key="i" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="仓库地址">
                <el-input v-model="form.address"></el-input>
              </el-form-item>
              <el-form-item label="仓库面积(㎡)">
                <el-input type="number" v-model.number="form.area"></el-input> </el-form-item
              ><el-form-item label="仓库图片" v-if="flag">
                <image-preview v-if="form.imgUrl" :src="form.imgUrl" :height="60"></image-preview>
                <span v-else>暂无图片</span> </el-form-item
              ><el-form-item label="仓库图片" v-else>
                <image-upload v-model="form.imgUrl"></image-upload></el-form-item
              ><el-form-item label="仓库人员">
                <el-input v-model="form.manager"></el-input>
              </el-form-item>
              <el-form-item label="仓库状态">
                <span v-if="flag">{{ form.status }}</span>
                <el-select v-model="form.status" v-else placeholder="选择">
                  <el-option v-for="(item, i) in wStatusList" :key="i" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="仓库描述">
                <el-input type="textarea" v-model="form.description"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click=";(form = null), (dialogFormVisible = false)">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除弹框 -->
    <el-dialog title="提示" :visible.sync="delW" width="30%">
      <span>确定删除 {{ W.name }} 吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delW = false">取 消</el-button>
        <el-button type="primary" @click="removeW">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增弹框 -->
    <el-dialog title="新增仓库" :visible.sync="addDialog" width="30%">
      <el-form :data="addForm">
        <el-row :gutter="70">
          <el-col
            ><div class="grid-content bg-purple">
              <el-form-item label="仓库名称">
                <el-input v-model="addForm.name"></el-input>
              </el-form-item>

              <el-form-item label="仓库类型">
                <el-select v-model="addForm.type" placeholder="选择">
                  <el-option v-for="(item, i) in wTypeList" :key="i" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="仓库地址">
                <el-input v-model="addForm.address"></el-input>
              </el-form-item>
              <el-form-item label="仓库面积(㎡)">
                <el-input type="number" v-model.number="addForm.area"></el-input> </el-form-item
              ><el-form-item label="仓库图片">
                <image-upload v-model="addForm.imgUrl"></image-upload></el-form-item
              ><el-form-item label="仓库人员">
                <el-input v-model="addForm.manager"></el-input>
              </el-form-item>
              <el-form-item label="仓库状态">
                <el-select v-model="addForm.status" placeholder="选择">
                  <el-option v-for="(item, i) in wStatusList" :key="i" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="仓库描述">
                <el-input type="textarea" v-model="addForm.description"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addW">确 定</el-button>
      </span>
    </el-dialog>
    <Pagination
      class="page-container"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="pageGetList"
    ></Pagination>
  </div>
</template>

<script>
import {
  listWarehouse,
  getWarehouse,
  updateWarehouse,
  delWarehouse,
  addWarehouse
} from '@/api/warehouse/list'
export default {
  data() {
    return {
      // 数据
      list: [],
      // 数据条数
      total: 0,
      // 选择数据
      multipleSelection: [],
      loading: false,
      // 弹框
      dialogFormVisible: false,
      // 详情修改表单
      form: null,
      // 判断详情 修改
      flag: null,
      // 仓库类型
      wTypeList: ['普通仓库', '特殊仓库', '停车场'],
      // 仓库状态
      wStatusList: ['正常', '异常'],
      // 删除弹框
      delW: false,
      // 要删除的仓库名称和序号
      W: { name: '', id: null },
      // 搜索参数
      searchForm: { name: '' },
      // 新增仓库表单
      addForm: {
        createBy: '',
        createTime: null, //仓库创建时间
        type: '', //仓库类型:1 普通仓库,2 特殊仓库,3 停车场
        name: '', //仓库名称
        description: '', //仓库描述
        area: null, //仓库面积(单位平方米)默认1000
        address: '', //仓库位置
        status: '', //仓库状态:1 正常,2 异常(默认 1)
        manager: '', //管理/仓库人员
        imgUrl: '' //仓库图片
      },
      // 新增弹框
      addDialog: false,
      // 分页查询
      queryParams: {
        bindStatus: '1',
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    search() {
      this.loadList(this.searchForm)
    },
    // 过滤类型
    filterType(t) {
      switch (t) {
        case '1':
          return '普通仓库'
        case '2':
          return '特殊仓库'
        case '3':
          return '停车场'
        case '普通仓库':
          return '1'
        case '特殊仓库':
          return '2'
        case '停车场':
          return '3'
      }
    },
    // 过滤状态
    filterStatus(s) {
      switch (s) {
        case '1':
          return '正常'
        case '2':
          return '异常'
        case '正常':
          return '1'
        case '异常':
          return '2'
      }
    },
    // 获取数据
    loadList(query = null) {
      this.loading = true
      listWarehouse(query).then((res) => {
        res.rows.forEach((item) => {
          if (item.type) {
            item.type = this.filterType(item.type)
          }
          if (item.status) {
            item.status = this.filterStatus(item.status)
          }
        })
        this.list = [...res.rows]
        this.total = res.total
        this.loading = false
      })
    },
    // 分页查询
    pageGetList() {
      listWarehouse(this.queryParams).then((response) => {
        this.list = response.rows
        this.total = response.total
      })
    },
    // 清空新增表单
    resetAddForm() {
      this.addForm = {
        createBy: '',
        createTime: null, //仓库创建时间
        type: '', //仓库类型:1 普通仓库,2 特殊仓库,3 停车场
        name: '', //仓库名称
        description: '', //仓库描述
        area: null, //仓库面积(单位平方米)默认1000
        address: '', //仓库位置
        status: '', //仓库状态:1 正常,2 异常(默认 1)
        manager: '', //管理/仓库人员
        imgUrl: '' //仓库图片
      }
    },
    // 新增仓库
    addW() {
      this.addForm.type = this.filterType(this.addForm.type)
      this.addForm.status = this.filterStatus(this.addForm.status)
      addWarehouse(this.addForm).then((res) => {
        this.loadList()
        this.addDialog = false
        this.$modal.msgSuccess('新增成功')
      })
    },
    // 获取仓库详情
    particulars(id) {
      this.dialogFormVisible = true
      this.flag = true
      getWarehouse(id).then((res) => {
        const { data } = res
        data.type = this.filterType(data.type)
        data.status = this.filterStatus(data.status)
        this.form = data
      })
    },
    // 修改仓库信息
    amend(id) {
      this.dialogFormVisible = true
      this.flag = false
      getWarehouse(id).then((res) => {
        const { data } = res
        data.type = this.filterType(data.type)
        data.status = this.filterStatus(data.status)
        this.form = data
      })
    },
    // 激活删除仓库弹框
    remove(id, name) {
      this.delW = true
      this.W.name = name
      this.W.id = id
    },
    // 删除仓库
    removeW() {
      delWarehouse(this.W.id).then((res) => {
        this.delW = false
        this.loadList()
        this.$modal.msgSuccess('删除成功')
      })
    },
    // 弹框确认事件
    submitForm() {
      // 详情
      if (this.flag) {
        this.form = null
        this.dialogFormVisible = false
        return
      } else {
        this.form.type = this.filterType(this.form.type)
        this.form.status = this.filterStatus(this.form.status)
        // 修改
        updateWarehouse(this.form).then((res) => {
          this.form = null
          this.dialogFormVisible = false
          this.loadList()
          this.$modal.msgSuccess('修改成功')
        })
      }
    },
    // 重置搜索
    resetSearch() {
      this.searchForm.name = ''
      this.loadList()
    }
  },
  watch: {
    // 监听新增弹框
    addDialog() {
      this.resetAddForm()
    }
  },
  created() {
    // 初始化数据
    this.loadList()
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 15px;
  .searchText {
    display: inline-block;
    margin-bottom: 10px;
    font-weight: 600;
  }
  .searchBtn {
    width: 100px;
    float: right;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .resetBtn {
    margin-left: 10px !important;
  }
  .addBtn {
    margin-top: 60px;
  }
  .data-table {
    margin-top: 15px;
  }
}
</style>
